<template>
  <div class="manualUpload-path">
    <el-upload
      ref="upload"
      multiple
      :before-upload="handleChange"
      list-type="picture-card"
      :action="action"
      :data="params"
      :on-remove="handleRemove"
      :limit="numLimit"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
      showImageUrl: "",
      baseUrl: global.baseurl,
    };
  },
  props: ["numLimit", "typeLimit", "sizeLimit", "action", "params"],
  computed: {},
  created() {},
  watch: {},
  methods: {
    handleSuccess(res, file) {
      this.$emit("uploadSucess", res);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(file) {
      let canUpload = true; //是否可以上传
      let fileName = file.name;
      let size = file.size / 1024 / 1024 < this.sizeLimit || 2;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (!this.typeLimit.includes(lastName)) {
        this.$message({
          message: `文件格式只能是${this.typeLimit}`,
          type: "warning",
        });
        canUpload = false;
      }
      if (!size) {
        this.$message({
          message: `文件格式不能超过${this.sizeLimit || 2}MB`,
          type: "warning",
        });
        canUpload = false;
      }
      return canUpload;
    },
    handleRemove(file, fileList) {
      let resData = (file.response && file.response.data) || null;
      if (resData) {
        let params = {
          img: resData.img,
          thumbImg: resData.thumbImg,
        };
        this.$axios.delete("/api/del/img", { params: params }).then((res) => {
          if (res.data.code == 200) {
            this.$emit("uploadRemove", params);
          } else {
            this.$alert(res.data.message, "提示", {
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        });
      }
    },
  },
};
</script>

<style lang='less'>
.manualUpload-path {
  .upload_file {
    width: 100px;
    height: 100px;
    font-size: 30px;
    color: #b5b5b5;
    background: #fbfdff;
    border: 1px dashed #c0ccda;
  }
}
</style>